<template>
  <div class="count-down-wrap">
    <h1>{{times[0]}} : {{times[1]}} : {{times[2]}}</h1>
  </div>
</template>

<script>
export default {
  data(){
    return{
      times:[]
    }
  },
  methods:{
    countDown(){
      let end = new Date('2021/07/02').valueOf()
      let now = new Date().valueOf()
      let totalSecond = (end - now) / 1000
      let timer = setInterval(() => {
        totalSecond --
        this.times = [totalSecond/3600|0, totalSecond/60%60|0, totalSecond%60|0].map(v=>v.toString().padStart(2, 0))
      }, 1000);
      this.$on('hook:destoryed', ()=>{
        clearInterval(timer)
      })
    }
  },
  created(){
    this.countDown()
  }
}
</script>

<style lang="less" scoped>

</style>